<template>
  <div class="home">
    <!-- 顶部栏 -->
    <div class="header">
      <div class="area">
        <router-link to="/area">
          <van-icon name="location-o" /> 
          {{$store.state.selectedArea}}
          <van-icon name="arrow-down" />
        </router-link>
      </div>
      <div class="title">
        <h3>宠物派领养</h3>
      </div>
    </div>
    <!-- banner部分 -->
    <div class="banner">
      <div class="banner-list">
        <img src="../../assets/images/banner.png" alt="">
      </div>
    </div>
    <!-- 导航栏 -->
    <div class="nav">
      <ul class="flex">
        <li v-for="i in nav" :key="i.id" @click="go(i.path)">
          <img :src="i.img" alt="">
          <h2>{{ i.title }}</h2>
        </li>
      </ul>
    </div>
    <!-- 通知区 -->
    <div class="notice">
      <van-notice-bar left-icon="volume-o" :scrollable="false" background="#FEF8F8" color="#BAB6BF">
        <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
          <van-swipe-item>
            <b>成功找家</b>
            <span>恭喜广州市的小年找到新家</span>
          </van-swipe-item>
          <van-swipe-item>
            <b>成功找家</b>
            <span>恭喜广州市的小年找到新家</span>
          </van-swipe-item>
          <van-swipe-item>
            <b>成功找家</b>
            <span>恭喜广州市的小年找到新家</span>
          </van-swipe-item>
        </van-swipe>
      </van-notice-bar>
    </div>
    <!-- 主体导航栏 -->
    <div class="main">
      <div>
        <van-tabs v-model="active">
          <van-tab title="收藏">喵，暂时还没有收藏</van-tab>
          <van-tab title="猫咪">
            <HomeList></HomeList>
            <HomeList></HomeList>
            <HomeList></HomeList>
            <HomeList></HomeList>
            <HomeList></HomeList>
          </van-tab>
          <van-tab title="狗狗">
            <h1>
            <HomeList></HomeList>
            <HomeList></HomeList>
            <HomeList></HomeList>
            <HomeList></HomeList>
            </h1>
          </van-tab>
        </van-tabs>
      </div>

    </div>


    <!-- <my-footer /> -->
  </div>
</template>

<script>
import MyFooter from '@/components/MyFooter.vue'
import HomeList from '@/components/HomeList.vue'
export default {
  name: 'order',
  components: { MyFooter, HomeList, HomeList },
  data() {
    return {
      nav: [
        { id: 1, img: require('../../assets/images/nav11.jpg'),path:'/message' ,title: '消息' },
        { id: 2, img: require('../../assets/images/nav12.jpg'),path:'/send' ,title: '发布' },
        { id: 3, img: require('../../assets/images/nav13.jpg'),path:'/cat' ,title: '上门喂猫' },
        { id: 4, img: require('../../assets/images/nav14.jpg'),path:'/dog' ,title: '上门遛狗' },
      ],
      active: 1,
    }
  },
  methods:{
    go(path){
      this.$router.push(path)
    }
  }

}
</script>

<style lang="scss" scoped>
.home {
  padding: 1rem;

  // 顶部
  .header {

    padding: 2rem 0;
    position: relative;

    .area {
      text-align: left;
      position: absolute;
      a{color: #333;}
    }

    .title {
      position: absolute;
      left: 50%;
      transform: translateX(-40%);
      flex: 1;
      text-align: center;
    }

  }

  // banner
  .banner {
    text-align: center;
    border-radius: 0.5rem;
    overflow: hidden;

    img {
      width: 100%;
    }
  }

  // 导航栏
  .nav {
    padding: 1rem;

    ul {
      justify-content: space-between;
      align-items: baseline;

      li {
        text-align: center;
      }
    }
  }

  // 消息垂直提示
  .notice-swipe {
    height: 1.5rem;
    line-height: 1.5rem;
  }

  .notice {
    b {
     font-weight: bold;
      font-size: 0.9rem;
      color: #000;
      margin-right: 1rem;
    }

    padding: 1rem 0;
  }

  // 
  .main {
    ::v-deep .van-tabs__line {
      background-color: transparent;
      border-radius: 60%;
      height: 10px;
      width: 20px;
      border-bottom: 4px solid #EF8C89;

    }

    .main-list {
      margin-bottom: 5rem;

      .main-img {
        img {
          border-radius: 10px;
          // overflow: hidden;
        }
      }

      .main-list-item {
        padding-left: 1rem;

        h1 {
          font-size: 1.3rem;
          font-weight: 600;
          color: #524F5E;
        }

        color: #8C8A99;

        .main-message {
          margin-top: 0.8rem;

          span {
            background-color: #F5F5F5;
            font-size: 0.8rem;
            margin-right: 0.2rem;
            padding: 0.3rem;
          }
        }

        .main-title {
          margin-top: 0.8rem;
          font-size: 0.8rem;

        }

        .main-kind {
          margin-top: 1.5rem;

          span {
            padding: 0.3rem;
            border: 1px solid #8D73EC;
            color: #8D73EC;
            font-size: 0.5rem;
            margin-right: 0.5rem;
          }

        }

      }
    }

    ::v-deep .van-tabs__wrap {
      margin-bottom: 1rem;
    }
  }

  .flex {
    display: flex;
  }
}
</style>